<!DOCTYPE html>
<html>
<head>
    <title>OSS in Browser</title>
    <script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>
    {{--<script type="text/javascript" src="js/app.js"></script>--}}
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/style.css" />
</head>
<style>
    .show_shoppic p{width: 200px;height: 130px;margin: 20px;position: relative;}
    .show_shoppic p img{width: 200px;height: 130px;}
    .show_shoppic p .pic_close{position: absolute;top: -10px;right: -10px;width: 20px;height: 20px;margin: 0;}
</style>
<body>
<div id="main">
    <div class="page-header">
        <h1>OSS <small>in</small> Browser</h1>
    </div>

    <form action="" class="form-horizontal">
        <div class="form-group">
            <label>Select file</label>
            <!-- <input type="file" id="file" name=""  onchange="javascript:setImagePreviews();"/> -->
            <input type="file"  name="file" id="file" multiple="multiple"  style="width:150px;" onchange="javascript:setImagePreviews('dd','file',file);"/>
            <div id="dd">

            </div>
        </div>
        <div class="show_shoppic oh" id="show" style="margin-top: 200px;">

        </div>
        <!--  <div class="form-group">
             <label>Store as</label>
             <input type="text" class="form-control" id="object-key-file" value="object"/>
         </div> -->
        <div class="form-group">
            <input type="button" class="btn btn-primary" id="file-button" value="Upload" />
        </div>
    </form>
    <br />
    <div class="progress">
        <div id="progress-bar"
             class="progress-bar"
             role="progressbar"
             aria-valuenow="0"
             aria-valuemin="0"
             aria-valuemax="100" style="min-width: 1px;">
            0%
        </div>
    </div>
</div>
{{--<img id="showpic" src="https://fbw.oss-cn-beijing.aliyuncs.com/temp/huangwenfeng_0" alt=""><button id="btn">shagn</button>--}}
<script src="{{env('JS_DOMAIN')}}js/jquery-1.11.1.min.js?v={{env('JS_VERSION')}}"></script>
<script>
    'use strict';
    var OSS = OSS.Wrapper;
    var STS = OSS.STS;

    // Play without STS. NOT SAFE! Because access key id/secret are
    // exposed in web page.

    var client = new OSS({
        region: 'oss-cn-beijing',
        accessKeyId: '{{$AccessKeyId}}',
        accessKeySecret: '{{$AccessKeySecret}}',
        stsToken: '{{$SecurityToken}}',
        bucket: 'fbw',
        secure: true
    });

    var applyTokenDo = function (func) {
        return func(client);
    };

    var progress = function (p) {
        return function (done) {
            var bar = document.getElementById('progress-bar');
            bar.style.width = Math.floor(p * 100) + '%';
            bar.innerHTML = Math.floor(p * 100) + '%';
            done();
            console.log(p)
        }
    };
    var picarr=[];
    var timer=null;
    var schedule=function () {
        timer=setInterval(function() {//监听上传进度条的百分比
            var bar = document.getElementById('progress-bar');
            console.log(bar.innerHTML);
        },100)
    }
    var uploadFile = function (client) {
        var docObj = document.getElementById("file");
        var count=docObj.files;
        var show = document.getElementById('show');
        // alert(count.length)
        for(var i=0; i<count.length; i++) {
            var file = document.getElementById('file').files[i];
            var key = "temp/huangwenfeng_" + i;
//            console.log(key)
            //var key = document.getElementById('object-key-file').value.trim() || 'object';
//            console.log(file.name + ' => ' + key);
             schedule();

            client.multipartUpload(key, file, {
                progress: progress
            }).then(function (res) {
                var ps = '<p class="fl"><img src="' + res.url + '"><img class="pic_close" src="{{env('IMAGE_DOMAIN')}}images/access_delete.png?v={{env('IMAGE_VERSION')}}" alt=""> </p>';
                $("#show").append(ps)
                console.log('upload success: %j', res);
                picarr.push(res.url);
//                return listFiles(client);
                clearInterval(timer);
            });
        }
        return false;
    };

    window.onload = function () {
        document.getElementById('file-button').onclick = function () {
            applyTokenDo(uploadFile);
        }
    };



    function setImagePreviews(avalue,inputid,picid) {
        var docObj = document.getElementById(inputid);
        var dd = document.getElementById(avalue);
        var srcurl = [];
        dd.innerHTML = "";
        var fileList = docObj.files;
        for (var i = 0; i < fileList.length; i++) {
            dd.innerHTML += "<img style='float: left;' id='"+picid + i + "'  />";
            {{--dd.innerHTML += '<p class="fl"><img  id="'+picid + i + '"><img class="pic_close" src="{{env('IMAGE_DOMAIN')}}images/access_delete.png?v={{env('IMAGE_VERSION')}}" alt=""> </p>';--}}
            var imgObjPreview = document.getElementById(picid+i);
            if (docObj.files && docObj.files[i]) {
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '200px';
                imgObjPreview.style.height = '130px';
                //imgObjPreview.src = docObj.files[0].getAsDataURL();
                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
                srcurl.push(docObj.files[i])
            } else {
                //IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                alert(imgSrc)
                var localImagId = document.getElementById("img" + i);
                //必须设置初始大小
                localImagId.style.width = "150px";
                localImagId.style.height = "180px";
                //图片异常的捕捉，防止用户修改后缀来伪造图片
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch (e) {

                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
        }
        console.log(dd)
        return true;
    }
</script>
</body>
</html>